<template>
	<view class="uni_box home">
		<!-- <navbar title=''>
		</navbar> -->
		<view class="content">
			<image class="qianbg" src="/static/img/qianbg.png"></image>
			<view class="qianview">
				<view class="jione">
					<image class="icon_back" src="/static/img/icon_back.png" @click="getfan"></image>
					<view class="jiview" @click="getjilu">
						<image class="jilu" src="/static/img/jilu.png"></image>
						<text class="jitit">记录</text>
					</view>
				</view>
				<view class="jitwo">
					<view class="guaview">
						<view class="dintong" v-if="zhonglist != ''">
							<swiper class="blobnavswiper" style="height: 62rpx;width: 100%;" vertical autoplay circular interval="3000">
								<swiper-item class="blobnavswipers" v-for="(item,index) in zhonglist" :key="index">
									<view class="dinitem">
										<text class="dinwei">{{item.msg}}</text>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<image class="lhongbao" src="/static/img/lhongbao.png"></image>
					<image class="yu" src="/static/img/yutu.gif"></image>
				</view>
				<view class="jithree">
					<text class="zong">奖池总金额(元)</text>
					<view class="jianview">
						<view class="jianitem" v-for="(item,index) in info.total_money.toString()" :key="index">
							<text>{{ item }}</text>
						</view>
					</view>
				</view>
				<view class="zhiview">
					<text class="dangqian">{{info.tip_text}}</text>
					<view class="zhibtn" @click="fpayActivitytwo" v-if="info.button_type == 'sign'">
						{{info.button_text}}
					</view>
					<view class="zhibtn" @click="fpayActivity" v-if="info.button_type == 'pay'">
						去支付
					</view>
				</view>
				<view class="hview" v-if="zklist">
					<text class="hongtit">领红包战况</text>
					<view class="hongview">
						<view class="hongitem" v-for="(item,index) in zklist" :key="index">
							<view class="htou">
								<image class="tous" :src="item.avatar?item.avatar:'/static/mine/tous.png'"></image>
								<image class="jli" :src="info.avatar_image?info.avatar_image:'/static/img/jli.png'"></image>
							</view>
							<text class="hname">{{ item.nickname }}</text>
							<text class="hprice">{{item.money_text}}</text>
						</view>
						<!-- <view class="hongitem">
							<view class="htou">
								<image class="tous" src="/static/mine/tous.png"></image>
								<image class="jli" src="/static/img/jli.png"></image>
							</view>
							<text class="hname">创***客</text>
							<text class="hprice">获得16.6元</text>
						</view>
						<view class="hongitem">
							<view class="htou">
								<image class="tous" src="/static/mine/tous.png"></image>
								<image class="jli" src="/static/img/jli.png"></image>
							</view>
							<text class="hname">创***客</text>
							<text class="hprice">获得16.6元</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swleftlist:[
					{showtext:'测试测试测试测试测试测试'},
					{showtext:'测试测试测试测试测试测试'},
					{showtext:'测试测试测试测试测试测试'},
					{showtext:'测试测试测试测试测试测试'},
				],
				info:{
					total_money:'0'
				},
				zhiinfo:{},
				zhonglist:[],
				zklist:[]
			}
		},
		onLoad() {
			this.getinits();//基础参数
			this.factivitymsg();//弹幕
			this.fqdgetLog();//中奖名单
		},
		onShow() {
		},
		methods: {
			async getinits(){
				let res = await this.$u.api.qdgetInti({
				});
				this.info = res
			},
			async factivitymsg(){
				let res = await this.$u.api.activitymsg({
				});
				this.zhonglist = res
			},
			async fqdgetLog(){
				let res = await this.$u.api.qdgetLog({
				});
				this.zklist = res
			},
			async fpayActivity(){//去支付
				let res = await this.$u.api.payActivity({
				});
				this.zhiinfo = res
				this.$u.toast("支付成功");
				this.getinits();//基础参数
				this.factivitymsg();//弹幕
				this.fqdgetLog();//中奖名单
			},
			async fpayActivitytwo(){//签到
				let res = await this.$u.api.sign({
				});
				console.log(res)
				this.$u.toast("签到成功");
				this.getinits();//基础参数
				this.factivitymsg();//弹幕
				this.fqdgetLog();//中奖名单
			},
			getjilu(){
				this.navrouter("/pages_subject/twoPage/PayRecord");
			},
			getfan(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		min-height: 130vh;
		background-color: #f5f5f5;
		position: relative;
		.qianbg{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.qianview{
			position: relative;
			.jione{
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 30rpx 0 0 30rpx;
			}
			.icon_back{
				width: 35rpx;
				height: 35rpx;
				position: relative;
			}
			.jiview{
				margin-left: auto;
				width: 126rpx;
				height: 60rpx;
				background: rgba(0,0,0,0.2);
				border-radius: 30rpx 0rpx 0rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.jilu{
					width: 44rpx;
					height: 44rpx;
					margin-right: 4rpx;
				}
				.jitit{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
		.jitwo{
			display: flex;
			margin: 0 80rpx;
			position: relative;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
			.lhongbao{
				width: 580rpx;
				height: 200rpx;
				position: relative;
				top: 30px;
				margin-top: 30rpx;
			}
			.yu{
				width: 360rpx;
				height: 270rpx;
			}
			.guaview{
				position: relative;
				width: 100%;
			}
			.dintong {
				width: 630rpx;
				height: 60rpx;
				border-radius: 30rpx;
				position: absolute;
				top: 0;
				left: 0;
				.blobnavswiper {
					background: rgba(212,6,6,0.4);
					border-radius:30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}

				.dintou {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-right: 10rpx;
					position: relative;
					top: 2rpx;
					margin-left: 8rpx;
				}

				.dinitem {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 30rpx;
				}

				.dinwei {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					max-width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.you {
					margin-left: auto;
					width: 12rpx;
					height: 22rpx;
				}
			}
		}
		.jithree{
			margin: -8rpx 30rpx 30rpx;
			position: relative;
			background: #FFDDA9;
			border-radius: 20rpx;
			border: 8px solid #FF5557;
			padding: 30rpx 30rpx 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.zong{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				display: block;
				margin-bottom: 30rpx;
			}
			.jianview{
				display: flex;
				flex-direction: row;
				.jianitem{
					width: 80rpx;
					height: 80rpx;
					background: #FFEED5;
					border-radius: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					margin: 0 4.5rpx;
					text{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 50rpx;
						color: #F31B00;
					}
				}
			}
			
		}
		.zhiview{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 30rpx;
			.dangqian{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.zhibtn{
				height: 100rpx;
				background: linear-gradient(-5deg, #F99434, #FDDE9A);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #8C5310;
				width: 86%;
			}
		}
		.hview{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin: 30rpx;
			margin-top: 70rpx;
			.hongtit{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				display: block;
				text-align: center;
				margin-bottom: 30rpx;
			}
			.hongview{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.hongitem{
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					.htou{
						position: relative;
						width: 120rpx;
						height: 120rpx;

					}
					.tous{
						width: 100%;
						height: 100%;
						position: relative;

					}
					.jli{
						position: absolute;
						width: 140%;
						height: 47rpx;
						bottom: -15rpx;
						left: -20%;
					}
				}
				.hname{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					display: block;
					margin-top: 20rpx;
				}
				.hprice{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #F73335;
					display: block;
					margin-top: 8rpx;
				}
			}
		}

	}
	
</style>
